<script setup lang="ts">
import { get, loadFile, message, post } from '@/utils'
import useModal from '@/hooks/useModal'
import useTable from '@/hooks/useTable'
import avatar from '@/assets/avatar.png'
import AddModal from './Add.vue'
const props = defineProps<{
  show: boolean
  id: number | string
}>()
const emit = defineEmits(['update:show', 'reset', 'confirm'])
const { store } = useModal()
const { formatColumns } = useTable()
const searchQuery = reactive({
  goodsId: props.id,
})
const formRef = ref()
const actionRef = ref()
const remove = id => {
  post({ url: '?ids=' + id }, ({ code, msg }) => {
    if (code == 200) actionRef.value.reload()
    message({
      type: code == 200 ? 'success' : 'error',
      content: msg,
    })
  })
}
const pagination = {
  showPageSize: true,
  pageSize: 20,
}
const request = (params: any, sort: any, filters: any): Promise<any> => {
  return new Promise((resolve, reject) => {
    const query = { ...params, size: params.pageSize }
    Reflect.deleteProperty(query, 'pageSize')
    get(
      {
        url: '/server-shop/admin/goods/comment/page',
        data: query,
      },
      ({ data, code }) => {
        resolve({
          data: data.records,
          total: data.total,
          success: code == 200,
        })
      }
    )
  })
}
const handleClick = item => {
  const url = item.isShow ? '/server-shop/admin/goods/comment/hide' : '/server-shop/admin/goods/comment/show'
  post({ url, data: { ids: item.id } }, ({ code, msg }) => {
    if (code == 200) actionRef.value.reload()
    message({
      type: code == 200 ? 'success' : 'error',
      content: msg,
    })
  })
}
const columns = formatColumns([
  { title: '用户头像', dataIndex: 'userAvatar', width: 100 },
  { title: '用户昵称', dataIndex: 'userNickName', width: 200 },
  { title: '商品评分', dataIndex: 'goodsScore', width: 100 },
  { title: '商户评分', dataIndex: 'sellerScore', width: 100 },
  { title: '评论图片', dataIndex: 'img', width: 150, ellipsis: true },
  { title: '评论内容', dataIndex: 'content', width: 200, ellipsis: true },
  {
    title: '状态',
    dataIndex: 'isShow',
    width: 120,
    valueEnum: {
      1: { text: '显示', status: 'Success' },
      0: { text: '隐藏', status: 'Error' },
    },
  },
  { title: '创建时间', dataIndex: 'createTime', width: 200 },
  {
    title: '操作',
    dataIndex: 'operations',
    width: 100,
    fixed: 'right',
  },
])
</script>

<template>
  <CModal v-model:visible="props.show" width="1000px" :footer="false" title="商品评价" @cancel="emit('update:show', false)">
    <ProTable :columns="columns" :request="request" row-key="id" :form-ref="ref => (formRef = ref)" :pagination="pagination" header-title="" :scroll="{ x: 1000 }" column-resizable :params="searchQuery" :bordered="{ cell: true }" :action-ref="ref => (actionRef = ref)">
      <template #option-render="{ dom, reset }">
        <a-button type="primary" @click="store.handleShow({})">
          <template #icon>
            <icon-plus />
          </template>
          添加虚拟评论
        </a-button>
      </template>
      <template #userAvatar="{ record }">
        <a-image width="30" :src="record.userAvatar || avatar"></a-image>
      </template>
      <template #img="{ record }">
        <a-image-preview-group infinite>
          <a-space>
            <template v-for="(img, index) in record.img.split(',')">
              <a-image :src="img" width="50" />
            </template>
          </a-space>
        </a-image-preview-group>
      </template>
      <template #operations="{ record }">
        <a-space>
          <a-button type="text" size="small" @click="handleClick(record)"> {{ !record.isShow ? '显示' : '隐藏' }}</a-button>

          <!-- <a-popconfirm
                @ok="remove(record.id)"
                type="warning"
                content="确认删除该评论吗?"
              >
                <a-button type="text" size="small"> 删除</a-button>
              </a-popconfirm> -->
        </a-space>
      </template>
    </ProTable>
    <AddModal v-if="store.show" v-model:show="store.show" :id="props.id" @confirm="actionRef.reload" />
  </CModal>
</template>
